---
import type { Props } from "@astrojs/starlight/props";

import MobileMenuFooter from "@astrojs/starlight/components/MobileMenuFooter.astro";
import SidebarSublist from "@astrojs/starlight/components/SidebarSublist.astro";

const sidebar = (
  Astro.props.sidebar.filter((k) =>
    Astro.props.slug.startsWith("open-source")
      ? k.label === "open-source"
      : k.label === "cloud"
  )[0] as any
).entries;
---

<SidebarSublist sublist={sidebar} />
<div class="md:sl-hidden">
  <MobileMenuFooter {...Astro.props} />
</div>

<style is:global>
  button[aria-controls="starlight__sidebar"] {
    @apply block sm:hidden;
  }

  button[aria-controls="starlight__sidebar"] svg {
    @apply ml-2;
  }

  starlight-menu-button[aria-expanded="true"] button svg {
    @apply fill-black;
  }

  #starlight__on-this-page--mobile {
    @apply mt-2 mb-2;
  }
</style>
